<template>
  <section class="carousel">
    <div
      v-for="(slide, index) in slides"
      :key="index"
      class="slide"
      :class="{ active: currentIndex === index }"
    >
      <img :src="slide.img" :alt="slide.alt" />
      <div class="overlay">
        <img src="/images/5.jpg" alt="公司Logo" class="logo" />
        <h1>慧就业·大学生就业平台</h1>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const slides = ref([
  { img: "/images/1.jpg", alt: '宣传图1' },
  { img: '/images/2.jpg', alt: '宣传图2' }
])
const currentIndex = ref(0)

onMounted(() => {
  setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % slides.value.length
  }, 3000)
})
</script>

<style scoped>
/* 先确保html和body全屏 */
html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
}

.carousel {
  position: relative;
  width: 100vw;     /* 屏幕宽度 */
  height: 100vh;    /* 屏幕高度 */
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  transform: scale(1);
}

.slide.active {
  opacity: 1;
  z-index: 2;
  animation: zoomIn 1.5s forwards;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 充满且裁剪 */
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80vw;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 20px 40px;
  border-radius: 10px;
}

.logo {
width: 400px  !important;
height: 150px !important;
margin-bottom: 10px;
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7));
transition: width 0.3s ease;
}

/* 中等屏幕，比如平板 */
@media (min-width: 600px) {
.logo {
  width: 70px;
}
}

/* 大屏幕，比如电脑显示器 */
@media (min-width: 1024px) {
.logo {
  width: 90px;
}
}

@keyframes zoomIn {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}
</style>
